<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" type="text/css" href="{{pluginResources}}/Wiki/search/search.css" />
    <link rel="preload" href="{{pluginResources}}/fonts/Guruwords.ttf" as="font" />
</head>

<body id="body" {{sys.scale}}>
    <div>
        <div id="list">
            {{each data.results.records item}}
            <div class="item">
                <img src="{{pluginResources}}/Wiki/search/imgs/" class="item-bg">
                <img src="{{item.content.contentUrl}}" class="item-icon">
                <div class="item-name">{{item.name}}</div>
                <div class="item-star">{{item.content.star}}</div>
            </div>
            {{/each}}
        </div>
        <div id="copyright">{{@copyright}}</div>
    </div>

    <script>
        const itemEleArr = document.querySelectorAll(".item")
        itemEleArr.forEach(ele => {
            let star = ele.getElementsByClassName("item-star")[0].innerText
            switch (star) {
                case "5":
                    ele.getElementsByClassName("item-icon")[0].style.boxShadow = "inset 0px -17px 17px rgb(255, 247, 144,0.5)"
                    ele.querySelector(".item-bg").src = ele.querySelector(".item-bg").src + "5star.png"
                    break
                case "4":
                    ele.getElementsByClassName("item-icon")[0].style.boxShadow = "inset 0px -17px 17px rgb(203, 130, 240,0.5)"
                    ele.querySelector(".item-bg").src = ele.querySelector(".item-bg").src + "4star.png"
                    break
                case "3":
                    ele.getElementsByClassName("item-icon")[0].style.boxShadow = "inset 0px -17px 17px rgb(131, 211, 255,0.5)"
                    ele.querySelector(".item-bg").src = ele.querySelector(".item-bg").src + "3star.png"
                    break
                case "2":
                    ele.getElementsByClassName("item-icon")[0].style.boxShadow = "inset 0px -17px 17px rgb(160, 250, 180,0.5)"
                    ele.querySelector(".item-bg").src = ele.querySelector(".item-bg").src + "2star.png"
                    break
                case "1":
                    ele.getElementsByClassName("item-icon")[0].style.boxShadow = "inset 0px -17px 17px rgb(225, 225, 225,0.5)"
                    ele.querySelector(".item-bg").src = ele.querySelector(".item-bg").src + "1star.png"
                    break
                default:
                    ele.getElementsByClassName("item-icon")[0].style.boxShadow = "inset 0px -17px 17px rgb(30, 30, 32,0.5)"
                    ele.querySelector(".item-bg").src = ele.querySelector(".item-bg").src + "star.png"
                    break
            }
            ele.getElementsByClassName("item-star")[0].remove()
        })
    </script>
</body>

</html>